<template>
  <div class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <el-card shadow="never"
      class="box-card flex-sub"
      style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header"
            @click="panelActive = !panelActive">
            <i class="collapse-header-icon"
              :class="[panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top']" />
            {{ panelActive ? "隐藏" : "展开" }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small"
                  label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="监控设备名称"
                        label-width="120px">
                        <el-input v-model="searchModel.cameraName"
                          placeholder="监控设备名称"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="监控设备品牌"
                        label-width="120px">
                        <el-select v-model="searchModel.cameraBrand"
                          popper-class="global-select"
                          placeholder="选择监控设备品牌"
                          clearable
                          filterable>
                          <el-option v-for="item in cameraBrandData"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="所属部门"
                        label-width="120px">
                        <treeselect v-model="searchModel.deptGuid"
                          placeholder="选择所属部门"
                          :options="deptTreeDataList"
                          :default-expand-level="Infinity"
                          style="width: 100%" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="创建时间"
                        label-width="120px">
                        <el-date-picker v-model="value"
                          type="datetimerange"
                          :picker-options="pickerOptions"
                          range-separator="至"
                          start-placeholder="创建开始时间"
                          end-placeholder="创建结束时间"
                          align="right"
                          @change="handleAuditDateChange" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button type="primary"
                          icon="el-icon-search"
                          @click="toSearch"
                          style="margin-right: 10px">搜索</el-button>
                        <el-button type="info"
                          icon="el-icon-delete"
                          @click="toReset"
                          style="margin-right: 10px">重置</el-button>
                        <el-button size="small"
                          @click="getDataList">
                          <i class="el-icon-refresh"
                            style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
      <div>
        <el-button size="small"
          type="primary"
          @click="toAdd('', 1)"
          style="margin-bottom: 8px">
          <i class="iconfont icon-xinzenghuizong"
            style="font-size: 13px; margin-right: 5px" />添加监控设备
        </el-button>

        <el-table ref="elTable"
          v-loading="loading || deleteLoading"
          border
          fit
          size="medium "
          :data="dataList"
          style="width: 100%">
          <el-table-column align="center"
            type="index"
            width="50"
            fixed
            label="#"
            :index="indexMethod" />
          <af-table-column align="center"
            label="监控设备编码"
            prop="cameraCode" />
          <af-table-column align="center"
            label="监控设备名称"
            prop="cameraName" />
          <af-table-column align="center"
            label="监控设备品牌"
            prop="cameraBrand">
            <template slot-scope="{ row }">
              {{ cameraBrand(row.cameraBrand) }}
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="所在位置"
            prop="cameraLocation" />
          <af-table-column align="center"
            label="rtsp流地址"
            prop="rtsp" />
          <af-table-column align="center"
            label="播放流地址"
            prop="streamUrl" />
          <af-table-column align="center"
            label="所属部门"
            prop="deptName" />
          <af-table-column align="center"
            label="所属网格"
            prop="gridName" />
          <af-table-column align="center"
            label="创建时间"
            prop="createdTime">
            <template slot-scope="{ row }">
              {{ row.createdTime | datefmt("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </af-table-column>
          <el-table-column align="center"
            label="操作区"
            fixed="right"
            width="150">
            <template slot-scope="{ row }">
              <el-tooltip effect="dark"
                content="详情"
                placement="top-start">
                <i class="iconfont icon-chakanxiangqing2 i-detail"
                  @click="toDetail(row)" />
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="编辑"
                placement="top-start">
                <i class="iconfont icon-bianji2 i-edit"
                  @click="toAdd(row, 2)" />
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="删除"
                placement="top-start">
                <el-popconfirm :title="'确定删除【' + row.cameraName + '】该设备吗？'"
                  placement="top"
                  @confirm="toSingleDelete(row, $index, '确定')"
                  @cancel="toSingleDelete(row, $index, '取消')">
                  <i class="iconfont icon-shanchu i-delete"
                    slot="reference" />
                </el-popconfirm>
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="绑定设备"
                placement="top-start">
                <!-- <i class="el-icon-link i-edit "></i> -->
                <i class="iconfont icon-shebeibangding i-edit"
                  @click="toBinding(row)" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList" />
      </div>
    </el-card>
    <add v-if="isAddVisible"
      ref="addDialog"
      :dialog-visible="isAddVisible"
      :is-type="isType"
      :cameraBrandData="cameraBrandData"
      :deptTreeDataList="deptTreeDataList"
      :params="params"
      @close="dialogClose()"></add>

    <detail v-if="isDetailVisible"
      ref="detailDialog"
      :dialog-visible="isDetailVisible"
      :params="params"
      @close="dialogClose()" />

    <Binding v-if="isBindingVisible"
      ref="bindingDialog"
      :dialog-visible="isBindingVisible"
      :indexRecord="params"
      @close="isBindingVisible = false"></Binding>
  </div>
</template>

<script>
import systemManageApi from "@/api/system-manage";
import deviceManageApi from "@/api/device-manage";
import Pagination from "@/components/Pagination";
import dataTableMixins from "@/mixins/data-table-mixins";
import Add from "./components/add.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Detail from "./components/detail.vue";
import Binding from "./components/Binding.vue";

export default {
  components: {
    Pagination,
    Add,
    Treeselect,
    Detail,
    Binding,
  },
  mixins: [dataTableMixins],
  data () {
    return {
      deleteLoading: false,
      isDetailVisible: false,
      popoverVisible: false,
      value: "",
      pickerOptions: "",
      floorId: "",
      floorData: [],
      isType: false,
      isAddVisible: false,
      cameraBrandData: [],
      deptTreeDataList: [],
      params: {},
      isRelationVisible: false,
      isBindingVisible: false,
    };
  },
  mounted () {
    this.getDeptTreeDataList();
    this.getCameraBrandData();
    this.getDataList();
  },
  methods: {
    indexMethod (index) {
      return this.formatIndex(index, this.pagination);
    },
    handleSectorIdChange (val) {
      this.queryParams.floorId = val[val.length - 1];
    },

    getDeptTreeDataList () {
      systemManageApi
        .getDept()
        .then((ret) => {
          this.deptTreeDataList = ret.data.data.rows;
          this.deptTreeDataList.forEach((ele) => {
            this.getDeptGuidTree(ele);
          });
          this.deptTreeLoading = false;
          console.log("deptTreeDataList=", this.deptTreeDataList);
        })
        .catch(() => {
          this.deptTreeLoading = false;
          this.deptTreeDataList = [];
        });
    },
    getDeptGuidTree (ele) {
      ele.id = ele.guid;
      if (ele.children) {
        ele.children.forEach((chilEle) => {
          this.getDeptGuidTree(chilEle);
        });
      }
    },
    getCameraBrandData () {
      const data = {
        fieldName: "collect_Brand_id",
        tableName: "t_equipment_collect",
      };
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.cameraBrandData = r.data.dictValue;
      });
    },
    cameraBrand (key) {
      const data = this.cameraBrandData.filter((e) => {
        if (e.dictValue === key) {
          return e;
        }
      });
      if (data && data.length != 0) {
        return data[0].dictText;
      } else {
        return "-";
      }
    },
    getDataList () {
      this.loading = true;
      const searchModel = this.formatSearchData(this.searchModel);
      deviceManageApi
        .getEquipmentCameraList({
          ...this.pagination,
          ...searchModel,
          ...this.sort,
        })

        .then((ret) => {
          this.dataList = ret.data.data.rows;
          this.dataList.forEach((ele, i) => {
            this.selectedDataList.forEach((multEle, j) => {
              if (this.dataList[i].id === this.selectedDataList[j].id) {
                this.$refs.elTable.toggleRowSelection(this.dataList[i], true);
              }
            });
          });
          this.total = ret.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.total = 0;
        });
    },
    toSearch () {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    toReset () {
      this.searchModel = {};
      this.sort = {};
      this.$refs.elTable.clearSort();
      this.$refs.elTable.clearFilter();
      this.value = "";
      this.toSearch();
    },
    handleAuditDateChange (value) {
      if (value) {
        this.searchModel.createdTimeFrom = this.$moment(value[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchModel.createdTimeTo = this.$moment(value[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      } else {
        this.searchModel.createdTimeFrom = "";
        this.searchModel.createdTimeTo = "";
      }
    },
    toSingleDelete (data, index, type) {
      if (type === "确定") {
        this.deleteConfirm(data.id, "");
      }
    },
    deleteConfirm (ids) {
      this.deleteLoading = true;
      deviceManageApi
        .deleteEquipmentCamera(ids)
        .then(() => {
          this.$message.success("删除成功！");
          this.deleteLoading = false;
          this.getDataList();
        })
        .catch(() => {
          this.deleteLoading = false;
        });
    },
    toAdd (data, type) {
      this.isType = type;
      if (type === 2) {
        this.params = data;
      } else {
        this.params = {};
      }

      this.isAddVisible = true;
    },
    toDetail (data) {
      this.params = data;
      this.isDetailVisible = true;
    },
    dialogClose () {
      this.isAddVisible = false;
      this.isDetailVisible = false;
      this.getDataList();
    },

    toBinding (data) {
      this.params = data;
      this.isBindingVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/part-custom";
</style>
